import { Ref } from "vue";
import ZZAutoScroll from "@/utils/autoScroll";
import "./index.scss";
export default defineComponent({
	props: [],
	emits: [],
	setup() {
		let box2Ref = ref();
		let scroll2Ref = ref();
		let ts2Ref = ref();
		let zzScroll: Ref<ZZAutoScroll | undefined> = ref();
		onMounted(() => {
			zzScroll.value = new ZZAutoScroll(scroll2Ref.value, ts2Ref.value, box2Ref.value);
			nextTick(() => {
				zzScroll.value?.roll(60);
			});
		});
		onUnmounted(() => {
			zzScroll.value?.rollStop();
		});
		return () => {
			return (
				<div class="event-list">
					<div class="list-header flex text-white">
						<div class="prefix ml-6">级别</div>
						<div class="flex-1 text-center">内容</div>
						<div class="operate mr-6">操作</div>
					</div>
					<div class="scrollBarBox">
						<div
							class="box"
							ref={box2Ref}
							onMouseover={() => {
								zzScroll.value?.rollStop();
							}}
							onMouseout={() => {
								zzScroll.value?.rollStart(60);
							}}
						>
							<div ref={scroll2Ref}>
								<div class="list-row flex alarming">
									<div class="prefix">
										<div class="level-img level-1"></div>
									</div>
									<div class="flex-1 event-content">2#空调发生告警，值23</div>
									<div class="operate" title="处理">
										处理
									</div>
								</div>

								<div class="list-row flex ">
									<div class="prefix">
										<div class="level-img level-3"></div>
									</div>
									<div class="flex-1 event-content">2#空调发生告警，值23</div>
									<div class="operate" title="处理">
										处理
									</div>
								</div>

								<div class="list-row flex alarming">
									<div class="prefix">
										<div class="level-img level-2"></div>
									</div>
									<div class="flex-1 event-content">2#空调发生告警，值23</div>
									<div class="operate" title="处理">
										处理
									</div>
								</div>

								<div class="list-row flex alarming">
									<div class="prefix">
										<div class="level-img level-2"></div>
									</div>
									<div class="flex-1 event-content">2#空调发生告警，值23</div>
									<div class="operate" title="处理">
										处理
									</div>
								</div>

								<div class="list-row flex alarming">
									<div class="prefix">
										<div class="level-img level-2"></div>
									</div>
									<div class="flex-1 event-content">2#空调发生告警，值23</div>
									<div class="operate" title="处理">
										处理
									</div>
								</div>

								<div class="list-row flex alarming">
									<div class="prefix">
										<div class="level-img level-3"></div>
									</div>
									<div class="flex-1 event-content">2#空调发生告警，值23</div>
									<div class="operate" title="处理">
										处理
									</div>
								</div>

								<div class="list-row flex alarming">
									<div class="prefix">
										<div class="level-img level-3"></div>
									</div>
									<div class="flex-1 event-content">2#空调发生告警，值23</div>
									<div class="operate" title="处理">
										处理
									</div>
								</div>

								<div class="list-row flex alarming">
									<div class="prefix">
										<div class="level-img level-3"></div>
									</div>
									<div class="flex-1 event-content">2#空调发生告警，值23</div>
									<div class="operate" title="处理">
										处理
									</div>
								</div>

								<div class="list-row flex alarming">
									<div class="prefix">
										<div class="level-img level-2"></div>
									</div>
									<div class="flex-1 event-content">2#空调发生告警，值23</div>
									<div class="operate" title="处理">
										处理
									</div>
								</div>

								<div class="list-row flex alarming">
									<div class="prefix">
										<div class="level-img level-3"></div>
									</div>
									<div class="flex-1 event-content">2#空调发生告警，值23</div>
									<div class="operate" title="处理">
										处理
									</div>
								</div>

								<div class="list-row flex alarming">
									<div class="prefix">
										<div class="level-img level-2"></div>
									</div>
									<div class="flex-1 event-content">2#空调发生告警，值23</div>
									<div class="operate" title="处理">
										处理
									</div>
								</div>
							</div>
							<div ref={ts2Ref}></div>
						</div>
					</div>
				</div>
			);
		};
	}
});
